<script src="../js/prism.js"></script>
<article>
    <h1>排版</h1>

    <h2 class="mt-5">&lt;h1&gt;–&lt;h6&gt;：HTML 区域标题元素</h2>
    <p>元素呈现了六个不同的级别的标题，&lt;h1&gt; 级别最高，而 &lt;h6&gt; 级别最低。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <h1>最高级别的标题</h1>
            <h2>第二级别的标题</h2>
            <h3>第三级别的标题</h3>
            <h4>第四级别的标题</h4>
            <h5>第五级别的标题</h5>
            <h6>最低级别的标题</h6>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;h1&gt;最高级别的标题&lt;/h1&gt;
                &lt;h2&gt;第二级别的标题&lt;/h2&gt;
                &lt;h3&gt;第三级别的标题&lt;/h3&gt;
                &lt;h4&gt;第四级别的标题&lt;/h4&gt;
                &lt;h5&gt;第五级别的标题&lt;/h5&gt;
                &lt;h6&gt;最低级别的标题&lt;/h6&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">内联文本元素</h2>
    <p>常用内联HTML5元素的样式。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            您可以使用标记来<mark>突出显示</mark>文本<br>
            <del>这行文本将被视为已删除的文本</del><br>
            <s> 这一行文字将被视为不再准确</s><br>
            <ins>这一行文本被视为对文档的补充</ins><br>
            <u> 这行文字将显示为带下划线</u><br>
            <small>这行文字应视为精细打印。</small><br>
            <strong>此行呈现为粗体文本</strong><br>
            <em>这一行呈现为斜体文本</em><br>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                您可以使用标记来&lt;mark&gt;突出显示&lt;/mark&gt;文本&lt;br&gt;
                &lt;del&gt;这行文本将被视为已删除的文本&lt;/del&gt;&lt;br&gt;
                &lt;s&gt; 这一行文字将被视为不再准确&lt;/s&gt;&lt;br&gt;
                &lt;ins&gt;这一行文本被视为对文档的补充&lt;/ins&gt;&lt;br&gt;
                &lt;u&gt; 这行文字将显示为带下划线&lt;/u&gt;&lt;br&gt;
                &lt;small&gt;这行文字应视为精细打印。&lt;/small&gt;&lt;br&gt;
                &lt;strong&gt;此行呈现为粗体文本&lt;/strong&gt;&lt;br&gt;
                &lt;em&gt;这一行呈现为斜体文本&lt;/em&gt;&lt;br&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">abbr 缩写</h2>
    <p><code>&lt;abbr&gt;</code>用于代表缩写，并且可以通过可选的 title 属性提供完整的描述。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <p><abbr title="中华人民共和国">中国</abbr></p>
            <p><abbr title="HyperText Markup Language">HTML</abbr></p>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;p&gt;&lt;abbr title="中华人民共和国"&gt;中国&lt;/abbr&gt;&lt;/p&gt;
                &lt;p&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;&lt;/p&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">blockquote 块级引用</h2>
    <p><code>&lt;blockquote&gt;</code>代表其中的文字是引用内容。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <blockquote>
                <p>十步杀一人，千里不留行</p>
                <footer>[唐] 李白, <cite>侠客行</cite></footer>
              </blockquote>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;p&gt;&lt;abbr title="中华人民共和国"&gt;中国&lt;/abbr&gt;&lt;/p&gt;
                &lt;p&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;&lt;/p&gt;
            </code></pre>
        </div>
    </section>

    <h2 class="mt-5">blockquote 块级引用</h2>
    <p><code>&lt;blockquote&gt;</code>代表其中的文字是引用内容。</p>
    <section class="example-snippet d-flex border rounded-4 overflow-hidden">
        <div class="w-50 p-3 preview">
            <div class="dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown button
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </div>
        </div>
        <div class="highlight border-left bg-light w-50">
            <pre class="p-3"><code class="language-html">
                &lt;p&gt;&lt;abbr title="中华人民共和国"&gt;中国&lt;/abbr&gt;&lt;/p&gt;
                &lt;p&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;&lt;/p&gt;
            </code></pre>
        </div>
    </section>

</article>